<template>
  <main>
    <ul>
      <li v-for="items in Ping" :key="items.index">
        <div class="bookB">
          <p id="delete" @click="removePing(items._id, items.beforeid)">删除</p>  
          <span
            >于 {{ items.date }} 在
            <h3 @click="tobook(items.bookid)">{{ items.bookid }}</h3>
            中说了：</span
          >
          <p>{{ items.text }}</p>
        </div>
        
      </li>
    </ul>
  </main>
</template>

<script>
export default {
  created() {
      this.getThisUser();
  },
  data() {
    return {
        thisUser:{},
        Ping:[],
    };
  },
  methods: {
       async getThisUser(){
            const {data:res} = await this.$http.get(`/users/touser/${window.sessionStorage.getItem("userId")}`)
            this.thisUser = res.data.user;
            this.Ping = res.data.ping;
            //console.log(res);
        },
        tobook(id){
            let routeUrl = this.$router.resolve(`/tobook/${id}`);
            window.open(routeUrl.href, "_blank");
        },
    async removePing(id, before) {
      if (before == 0) {
        this.$confirm(
          "此评论为顶级评论，删除将删除所有子评论, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(async () => {
            const {
              data: res,
            } = await this.$http.delete(`/ping/deletePing/${id}`, {
              beforeid: before,
            });
            if (res == "OK") {
              this.getThisUser();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message.error("删除失败");
            }
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      } else {
        const { data: res } = await this.$http.delete(
          `/ping/deletePing/${id}`,
          { beforeid: before }
        );
        if (res == "OK") {
          this.getThisUser();
        }
        //console.log(res);
      }
    },
  },
};
</script>

<style lang="less" scoped>
li{
    list-style: none;
    height: 150px;
    width: 100%;
    display: flex;
    align-items: center;
    border-style: solid;
    border-width: 0px 0px 1px 0px;
}
main {
  height: 100%;
  width: 100%;
}
    h3{
        display: inline;
    }
    h3:hover{
        color: blue;
        cursor:pointer
    }

    #delete{
        width: 40px;
        margin-top: 0px;
        margin-bottom: 3px;
        color: red;
    }
    #delete:hover{
        font-size: 120%;
        cursor: pointer;
    }
    p {
        margin: 0px;
    }
</style>
